<template>
  <div id="car">
    <!-- 武汉车辆分布 -->
  </div>
</template>
<script type="text/javascript">
import axios from "@/utils/axios";
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var map = new AMap.Map("car", {
        mapStyle: "amap://styles/darkblue",
        center: [114.284702, 30.5],
        zoom: 11.5,
        features: ["bg", "road"],
        skyColor: "#eee",
        pitch: 0,
        viewMode: "3D"
      });

      $.get("https://a.amap.com/Loca/static/mock/sfcars.csv", function(csv) {
        var layer = new Loca.PointCloudLayer({
          map: map,
          fitView: false
        });

        layer.setData(csv, {
          lnglat: function(obj) {
            var value = obj.value;
            return [value["lng"], value["lat"]];
          },
          type: "csv"
        });

        layer.setOptions({
          style: {
            opacity: 0.8,
            radius: 0.9,
            color: "rgba(42, 167, 184, 1)"
          }
        });

        layer.render();
      });
    }
  }
};
</script>
<style >
#car {
  height: calc(100vh - 50px);
}
</style>